<template>
    <div class="box">
        <header class="header">
            <van-nav-bar
                title="地址列表"
                left-text="返回"
                left-arrow
                @click-left="$router.push({ name:'order', params: { addressid:'' } })"
            />
        </header>
        <div class="content">
            <van-address-list
                v-model="chosenAddressId"
                :list="list"
                default-tag-text="默认"
                @add="addAddress"
                @edit="onEdit"
                @select="onSelect"
            >
            <template #item-bottom>
                <van-button type="default" round size="mini" icon-position="right" @click.stop="delAddress(chosenAddressId)">删除
                </van-button>
            </template>
            </van-address-list>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import router from '../../router'
import { deleteAddress, updateOrderAddress, addressList } from '../../api/order'
import { Button, Toast, AddressList } from 'vant'

Vue.use(Button)
Vue.use(AddressList)
export default {
  data () {
    return {
      addressid: '',
      chosenAddressId: '1',
      listFlag: true,
      list: [
        // {
        //   id: '1',
        //   name: '张三',
        //   tel: '13000000000',
        //   address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
        //   isDefault: true
        // },
        // {
        //   id: '2',
        //   name: '李四',
        //   tel: '1310000000',
        //   address: '浙江省杭州市拱墅区莫干山路 50 号'
        // }
      ]
    }
  },
  methods: {
    // 新增地址
    addAddress () {
      // console.log(this.$route.params.time);
      router.push({ name: 'order3', params: { time: this.$route.params.time }})
    },
    onEdit (item, index) {
      Toast('编辑地址:' + index)
    },
    //  切换选中的地址，然后跳回提交订单页面
    onSelect (selectAddressMessage) {
      //  切换选中地址的资料 
      // console.log(selectAddressMessage);
      selectAddressMessage.time = this.$route.params.time

      //  修改订单地址
      updateOrderAddress (selectAddressMessage).then(res => {

        console.log(selectAddressMessage);
        // })
        console.log(res);

        // this.$router.push('/order')
        // router.push({ name: 'order', params: { addressid: selectAddressMessage.addressid }})
      })
    }
  },
  mounted () {
    //  查询地址列表
    addressList({ userid: localStorage.getItem('userid') }).then(res => {
      // 是集合所有地址列表的对象数组
      console.log(res.data.data);
      res.data.data.forEach((item,index) => {
            item.id = index + 1
            item.address = item.province + ' ' + item.city + ' ' + item.county + ' ' + item.addressDetail
            this.list.push(item)
            // console.log(item);
      })
    })
  }
}

</script>
